<template>
  <div id="Cart">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/index')"
    />
    <div v-for="(item,i) in goodsList" :key="i" class="box">
      <van-checkbox class="checkbox" v-model="item.checked" @click="qxcheckd" />

      <van-card :price="item.price" :title="item.name" thumb="'/static/img/+item.img'" class="right" />
      <!-- <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
      </template>-->
      <div class="but">
        <ul>
          <li>+</li>
          <li>{{item.nums}}</li>
          <li>-</li>
        </ul>
      </div>
    </div>

    <div class="footer">
      <van-submit-bar :price="this.$store.getters.totalPrice" button-text="提交订单">
        <van-checkbox v-model="checked" @click="qxcheck()">全选</van-checkbox>
        <!-- <input type="checkbox" :checked="checked">全选 -->
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      goodsList: this.$store.state.zkList,
      checked: this.$store.state.checked,
      checkAll:false
    };
  },
  methods: {
    add() {},
    j() {},
    qxcheck() {
      this.$store.commit("qxcheck");
    },
    qxcheckd() {
      // let count = 0;

      // let arr = this.checkAll.zkList

      // arr.forEach(item=>{
      //   if(item.checked){
      //     count++
      //   }
      // })

      // console.log(count)
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$nextTick(function(){
      this.checkAll = JSON.parse(localStorage.getItem('vuex'))
      console.log(this.checkAll)
    })
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
#Cart {
  .footer {
    background: white;
  }
  .box {
    margin-bottom: 0.2rem;
    display: flex;
    .checkbox {
      padding-top: 0.9rem;
      box-sizing: border-box;
      padding-left: 5%;
      width: 15%;
    }
    .right {
      flex: 1;
      width: 70%;
    }
    .but {
      width: 10%;
      height: 2rem;
      ul {
        height: 100%;
        li {
          align-items: center;
          text-align: center;
          height: 0.7rem;
          line-height: 0.7rem;
          font-size: 0.3rem;
        }
      }
    }
  }
}
</style>